<template>
	<view class="container">
		<!-- <view class="statusBox"> -->
		<view class="flexBox">
			<view :class="status == item.value?'statusItem active':'statusItem'" v-for="item in statusList"
				:key="item.title" @click="tabbarChange(item.value,item.title)">
				{{item.title}}
			</view>
		</view>
		<uni-search-bar style="background-color: #fff;" @confirm="search" v-model="keyword" @cancel="cancel"
			placeholder="请输入商铺名称" @clear="cancel"></uni-search-bar>
		<view class="" style="background-color: #fff;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="customer" style="margin: 0 20rpx;display: flex;align-items: center;">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
				<view v-if="range.length!==0" @click="timeDeletChange" class=""
					style="background-color: #fff;border-radius: 50%;padding: 5rpx 13rpx;margin-left: 20rpx;">
					<uni-icons type="closeempty" size="15"></uni-icons>
				</view>
			</view>
			<view class=""
				style="color: #0482D4;font-weight: bold;text-align: right;padding-top:20rpx;padding-right:30rpx">
				{{tabType}}赊账总计: ￥{{ momenyFormat(MoneyTotal) }}
			</view>
		</view>
		<!-- </view> -->

		<view class="content">
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="item,index in orderListData" :key="item.Id" @click="toInfoPage(item)">
					<view>
						<image class="imageLeft" :src="item.Logo||'/static/logo.png'" mode=""></image>
						<text class="textOverflow textWidth"> {{item.CompanyName}}</text>
						<view class="imageBox" v-if="item.State>=0">
							<image v-if="item.State==0" src="/static/home/fahuo.png" mode=""></image>
							<image v-if="item.State==1" src="/static/home/qianshou.png" mode=""></image>
						</view>
						<view class="imageBox" v-else>
							<image v-if="item.IsConfirm==0" src="/static/home/queren.png" mode=""></image>
							<image v-if="item.IsConfirm==2" src="/static/home/judan.png" mode=""></image>
						</view>
					</view>
					<view class="">
						单号：{{getReplaceId("B"+item.Id)}}
					</view>
					<view class="flexBox">
						<view class="">
							日期：{{item.CreateTime?item.CreateTime.substring(0,10):''}}
						</view>
						<view class="">
							金额：￥{{momenyFormat(item.CreditAmount||item.TotalSum)}}
						</view>
					</view>
					<view class="">
						账期：{{item.Period}} 天 ({{item.AccountingStartTime?item.AccountingStartTime.substring(0,10):''}} ~
						{{item.AccountingEndTime?item.AccountingEndTime.substring(0,10):''}})
					</view>
					<view v-if="item.State==0 && item.IsClick==false" class="noRead">
						<view> </view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="Status" :contentText="contentText" :rows="orderListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '../../utils/utils.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 总计
				MoneyTotal:0,
				// 加载状态
				Status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				range: [],
				status: "0-0",
				keyword: '',
				// tab点击类型
				tabType:"待确认",
				statusList: [{
						value: '0-0',
						title: '待确认'
					}, {
						value: '0',
						title: '已发货'
					},
					{
						value: '1',
						title: '已签收'
					},
					{
						value: '0-2',
						title: '已拒单'
					}
				],
				pagination: {
					PageIndex: 1,
					PageRows: 10,
				},
				Total: 0,
				orderListData: [],
				userInfo: {},
				momenyFormat,
				StartDate: "",
				EndDate: "",
				getUrl: '/BO/ApplicationForm/GetBuyerOrderList',
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			// this.status = uni.getStorageSync('tabKey') || '0-0'
			console.log('获取------------', this.status.indexOf('-'))
		  this.tabType="待确认"
			
		},
		// **
		//  * 监听 TabBar 切换点击
		//  */
		onTabItemTap: function(item) {
			// console.log('监听底部导航栏', item, this.tabType, this.status)
			// this.tabType="待确认"
			// this.status="0-0"
			// this.orderListData=[]
			// // 重新获取顶部导航栏列表数据
			// this.getDataList()
		},
		// onHide() {
		// 	this.status = "0-0"
		// 	this.tabType="待确认"
		// 	console.log('页面笑死',this.status)
		// 	// 关闭当前页面初始化顶部导航栏待确认
			
		// },
		onShow() {
			uni.removeStorageSync('ReceiptKeyword')
			this.orderListData = []
			this.pagination.PageIndex = 1
			// 判断返回来的顶部导航栏切换当前是哪一个 默认选中
			if(this.tabType==="待确认"){
				this.status = "0-0"
			}else if(this.tabType==='已发货'){
				this.status= "0"
			}else if(this.tabType==="已签收"){
				this.status="1"
			}else{
				this.status="0-2"
			}
			if (this.status.indexOf('-') > -1) this.getUrl = '/BO/ApplicationForm/GetBuyerOrderList'
			else this.getUrl = '/BO/ApplicationForm/GetBillingData'
			this.userInfo = uni.getStorageSync('userInfo')
			// 设置小红点
			// this.$store.commit('setTabBarBadge',"99")
			this.getDataList()
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.Status = "loading"
			this.orderListData = []
			this.pagination.PageIndex = 1
			// 重新获取查询数据
			this.getDataList()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// // 上拉加载更多
		// onReachBottom() {
		// 	if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
		// 		// 暂停加载  没有更多了
		// 		this.status = "noMore"
		// 		return 
		// 	}
		// 	this.getDataList()
		// },
		onNavigationBarButtonTap(e) {
			console.log('底部导航栏点击事件order页面里得', e) //如果是俩图标的话，index然后的0 或者1  就知道点击的哪个
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data){
				if(data){
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.orderListData.length >= this.Total) {
					this.Status = "noMore"
					return
				}
				this.getDataList()
			},
			
			// 搜索
			search() {
				this.pagination.PageIndex = 1
				this.orderListData = []
				this.getDataList()
			},
			// 搜索清空
			cancel() {
				this.keyword = ""
				this.pagination.PageIndex = 1
				this.orderListData = []
				this.getDataList()
			},
			// 时间选择
			// 时间选择
			changeDate(e) {
				console.log('时间选择', e)
				this.StartDate = e[0]
				this.EndDate = e[1]
				this.pagination.PageIndex = 1
				this.orderListData = []
				this.getDataList()
			},
			// 时间清空
			timeDeletChange() {
				this.range = []
				this.StartDate = ""
				this.EndDate = ""
				this.pagination.PageIndex = 1
				this.orderListData = []
				this.getDataList()
			},
			// 导航栏切换
			tabbarChange(e, type) {
				console.log('切换', e)
				this.tabType= type
				// uni.setStorageSync('tabKey', e)
				this.status = e
				this.orderListData = []
				this.pagination.PageIndex = 1
				this.StartDate = ""
				this.EndDate = ""
				this.keyword = ""
				console.log('导航栏切换', this.status)
				if (e.indexOf('-') > -1) {
					this.getUrl = '/BO/ApplicationForm/GetBuyerOrderList'
				}else {
					this.getUrl = '/BO/ApplicationForm/GetBillingData'
				}
				this.getDataList(e)
			},
			AgreementPage(item) {
				uni.setStorageSync('shopInfo', item)
				uni.navigateTo({
					url: '/pages/AgreementPage/AgreementPage'
				})
			},
			// 列表点击
			toInfoPage(item) {
				console.log('点击列表', item, this.tabType, this.status);
				if (item.State == 0 && !item.IsClick) {

					this.$http('post', '/BO/ApplicationForm/UpClick?id=' + item.Id).then(res => {
						if (res.Success) {}
					})
					this.$http('post', '/BO/ApplicationForm/ReadMessage?keword=' + this.userInfo.Id).then(res => {
						if (res.Success) {
							// 如果数量为0  说明没有订单  不需要显示有角标 
							if (res.Data == 0) {
								// 移除底部menu小红点
								uni.removeTabBarBadge({
									index: 1
								});
							} else {
								uni.setTabBarBadge({
									index: 1,
									text: res.Data
								})
							}
						}
					})
				}
				if (item.State >= 0) uni.navigateTo({
					url: '/pages/Order/OrderInfo?Id=' + item.Id + '&State=' + item.State
				})
				else uni.navigateTo({
					url: '/pages/Order/OrderInfoDetail?Id=' + item.Id
				})
			},
			getDataList(state) {
				let status = this.status.split('-')
				console.log('获取status', status)
				this.Status = "loading"
				// this.$http('post', '/BO/ApplicationForm/GetBuyerOrderList', {
				this.$http('post', this.getUrl, {
					...this.pagination,
					"SortField": "CreateTime",
					"SortType": "desc",
					"Search": {
						"Keys": this.userInfo.Id,
						"Keyword": this.keyword,
						"State": status.length > 1 ? status[1] : status[0],
						"StartDate": this.StartDate,
						"EndDate": this.EndDate
					}
				}).then(res => {
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.Status = "noMore"
							this.MoneyTotal = res.MoneyTotal
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.orderListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.orderListData = this.orderListData.concat(res.Data)
							this.pagination.PageIndex += 1
						}
							this.MoneyTotal = res.MoneyTotal
						uni.stopPullDownRefresh(); //停止刷新
						if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
							// 暂停加载  没有更多了
							this.Status = "noMore"
							return
						}

					} else {
						// 停止加载状态
						this.Status = "noMore"
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background-image: url(/static/background.png);
	// }
	::v-deep.uni-searchbar {
		background-color: #fff;
	}

	.noRead {
		display: flex;
		justify-content: flex-end;

		view {
			width: 20rpx;
			height: 20rpx;
			background-color: red;
			border-radius: 30rpx;
		}
	}

	.container {
		height: 100%;
		background-image: url('/static/home/background.png');
		background-size: contain;
		background-repeat: no-repeat;
		// padding-top: 40px;
		box-sizing: border-box;

		.content {

			font-size: 13px;

			.scroll {
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 260px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 155px);
				/* #endif */
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 180px);
				/* #endif */
			}
		}

		.flexBox {
			view {
				flex: 1;
			}
		}

		.statusBox {
			box-sizing: border-box;
			margin: 0 10px;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 1px 1px 5px #ccc;
		}

		.statusItem {
			text-align: center;
			// border: 1px solid #dedeed;
			box-sizing: border-box;
			padding: 5px;
			background-color: #fff;
			color: #888;

			&:active {
				background-color: #2979ff;
				color: #fff;
				font-weight: 600;
			}
		}

		.active {
			background-color: #2979ff;
			color: #fff;
			font-weight: 600;
		}

		.merchant {
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 1px 1px 5px #ccc;
			box-sizing: border-box;
			padding: 20rpx;
			padding-top: 10px;
			margin: 10px;
			position: relative;
			overflow: hidden;

			.imageLeft {
				width: 25px;
				height: 25px;
				vertical-align: bottom;
				margin-right: 6px;
				border-radius: 5px;
			}

			.imageBox {
				image {
					position: absolute;
					right: 0;
					top: 0;
					width: 40px;
					height: 40px;
				}
			}
		}


	}
</style>